<template>
  <div class="container">
    <!-- 购物车小球 -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="flag" ref="ball"></div>
    </transition>

    <!-- 头图模块 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper></swiper>
        </div>
      </div>
    </div>

    <!-- 价格信息 -->
    <div class="mui-card">
      <div class="mui-card-header">小米（mi）小米Note 16G双网通版</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>市场价：
            <del>￥2699</del>&nbsp;&nbsp;销售价：
            <span class="now-price">￥{{price}}</span>
          </p>
          <p class="buy-num">购买数量:&nbsp;&nbsp;
            <price @func ='getNumber'></price>
          </p>
          <p>
            <mt-button type="primary" size="small">立刻购买</mt-button>
            <mt-button type="danger" size="small" @click="addCar">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>

    <!-- 其他信息 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：</p>
          <p>库存情况：</p>
          <p>上架时间：</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goodsintro(id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goodsCom(id)">商品评论</mt-button>
      </div>
    </div>

    
  </div>
</template>
<script>

import price from "../common/price.vue";
import swiper from "../common/swiper.vue";
export default {
  data: function() {
    return {
      id: this.$route.params.id,
      flag: false,
      selectNumber: 1,
      price:2900
    };
  },
  methods: {
    goodsintro(id) {
      this.$router.push({ name: "goodsintro", params: { id } });
    },
    goodsCom(id) {
      this.$router.push({ name: "goodsCom", params: { id } });
    },
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;

      //获取小球的当前位置
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      const carPosition = document.getElementById('badge').getBoundingClientRect()
      const xDis = carPosition.left - ballPosition.left
      const yDis = carPosition.top - ballPosition.top



      el.style.transform = `translate(${xDis}px,${yDis}px)`;
      el.style.transition = "all 0.9s cubic-bezier(.12,-0.63,.95,.71)";
      done();
    },
    afterEnter(el) {
        
      this.flag = !this.flag;
    },
    getNumber(number){
        this.selectNumber=number
        // console.log('父组件中获取的值是'+this.selectNumber)
    },
    addCar(){
      //加入购物车按钮事件
      this.flag=!this.flag

      //数据存储到vuex思路分析
      /*1.安装、导入、配置vuex
       * 2.建立商品数据对象
       * 3.在store的mutation中创建数据的处理逻辑
       * 4.在此事件中调用mutation，传递数据
       *  
       */
      var goodsInfo = {
        id:this.id,
        count:this.selectNumber,
        selected:true,
        price:this.price
      }

      this.$store.commit('shoppingCar',goodsInfo)
 
    

    }
  },
  components: {
    swiper,
    price,
    
  }
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #eee;
  // position: relative;
}
.container {
  overflow: hidden;
}
.now-price {
  color: red;
  font-weight: 700;
}
.buy-num {
  display: flex;
  line-height: 33px;
}

.mui-card-footer {
  display: block;
  button {
    margin: 10px 0;
  }
}

.ball {
  background-color: red;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  left: 150px;
  top: 331px;
  z-index: 100;
}
</style>